<template>
  <!--  <span>-->
  <!--    <el-button size="small" class="is-circle" icon="el-icon-s-operation" @click="handleClick"> </el-button>-->
  <!--    <el-drawer-->
  <!--      :title="title"-->
  <!--      class="el-drawer__wrapper avue-dialog avue-crud__dialog avue-crud__column custom-dialog"-->
  <!--      :visible.sync="visible"-->
  <!--      :append-to-body="true"-->
  <!--      :size="'40%'"-->
  <!--      :modal-append-to-body="modalAppendToBody"-->
  <!--      @open="handleOpen"-->
  <!--      @opened="handleOpened"-->
  <!--      @close="handleClose"-->
  <!--      @closed="handleClosed"-->
  <!--    >-->
  <!--      <div class="dialog-content">-->
  <!--        <el-table :data="data" ref="table" height="100%" size="small" border>-->
  <!--          <el-table-column align="center" label="列名" width="100" header-align="center" prop="label" key="label"> </el-table-column>-->
  <!--          <template v-for="(item, index) in defaultColumn">-->
  <!--            <el-table-column :label="item.label" v-if="item.hide !== true" :prop="item.prop" :key="index" align="center" header-align="center">-->
  <!--              <template slot-scope="{ row }">-->
  <!--                <el-checkbox @change="handleChange(item.prop)" v-model="objectOption[row.prop][item.prop]"> </el-checkbox>-->
  <!--              </template>-->
  <!--            </el-table-column>-->
  <!--          </template>-->
  <!--        </el-table>-->
  <!--      </div>-->
  <!--      <footer class="footer">-->
  <!--        <el-button size="small" type="primary" @click="handleConfirm">确 定</el-button>-->
  <!--        <el-button size="small" @click="visible = false">取 消</el-button>-->
  <!--        <el-button size="small" type="danger" @click="handleReset">重 置</el-button>-->
  <!--      </footer>-->
  <!--    </el-drawer>-->
  <!--  </span>-->
</template>

<script>
import { calcCascader } from '@/components/export-excel/util';
/*
 * appendToBody  modalAppendToBody  为element中属性
 *
 * */
export default {
  name: 'userTableConfig',
  props: {
    appendToBody: {
      type: Boolean,
      default: false
    },
    modalAppendToBody: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '用户设置'
    },
    option: {
      type: Object,
      default: () => ({})
    }
  },
  inject: ['crud', 'reload'],
  data() {
    return {
      data: [],
      visible: false,
      objectOption: {}
    };
  },
  computed: {
    defaultColumn() {
      return [
        {
          label: '隐藏',
          prop: 'hide'
        },
        {
          label: '冻结',
          prop: 'fixed'
        },
        {
          label: '排序',
          prop: 'sortable'
        },
        {
          label: '筛选',
          prop: 'filters'
        }
      ];
    },
    propOption() {
      let result = [];
      function findProp(list = []) {
        if (!Array.isArray(list)) return;
        list.forEach((ele) => {
          if (Array.isArray(ele.children)) findProp(ele.children);
          else result.push(ele);
        });
      }
      findProp(this.columnOption);
      result = calcCascader(result);
      return result;
    },
    columnOption() {
      let column = this.option.column || [];
      return column;
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.data = [];
        this.propOption.forEach((column) => {
          this.objectOption[column.prop] = column;
          if (column.showColumn !== false && column.label) this.data.push(column);
        });
      }
    }
  },
  methods: {
    handleOpen() {
      this.$emit('open');
    },
    handleChange(prop) {
      if (['hide', 'filters'].includes(prop)) {
        this.crud.refreshTable();
      }
      this.columnBox = true;
      this.$nextTick(() => this.rowDrop());
    },
    handleOpened() {
      this.$emit('opened');
    },
    handleClose() {
      this.$emit('close');
    },
    handleClosed() {
      this.$emit('closed');
    },
    handleClick() {
      this.visible = true;
    },
    handleConfirm() {
      this.$emit('confirm', this.columnOption);
      this.visible = false;
    },
    handleReset() {
      this.$emit('confirm', []);
      this.visible = false;
      this.reload();
    },
    rowDrop() {
      const el = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
      this.crud.tableDrop('column', el, (evt) => {
        this.crud.headerSort(oldIndex, newIndex);
        this.crud.refreshTable(() => this.rowDrop());
      });
    }
  }
};
</script>

<style lang="scss">
.custom-dialog {
  top: 0px;
  overflow: hidden;
  .dialog-content {
    overflow-x: hidden;
    overflow-y: scroll;
    height: calc(100vh - 152px);
  }
}
.footer {
  height: 52px;
  position: relative;
  left: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}

.avue-dialog .el-drawer__body {
  overflow: hidden;
}

.is-circle {
  border-radius: 15%;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
</style>
